<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-lg-12">
        <b-card header="<i class='fa fa-align-justify'></i> 产品详细">
          <div class="search-box">
            <b-button variant="outline-primary" @click="addProduct()">添加产品</b-button>
          </div>
          <div class="search-box">
            <select name="one" id="pro-one" class="form-control" v-model="searchType">
              <option value="name">产品名</option>
              <option value="goodsid">GoodsID</option>
              <option value="goodcode">代码</option>
              <option value="goodno">产品编号</option>
            </select>
            <input type="text" class="form-control"  placeholder="" v-model="searchName" @keyup.enter="searchProduct">
            <b-button class="form-control" variant="outline-primary" @click="searchProduct">搜索</b-button>
            <b-button class="form-control" variant="outline-primary" @click="reset">重置</b-button>
          </div>
          <!--<div class="search-box">-->
            <!--<input type="text" class="form-control"  placeholder="" v-model="searchName">-->
            <!--<b-button variant="outline-primary" @click="searchProduct()">搜索</b-button>-->
          <!--</div>-->

          <div class="table-box">
            <table class="table table-striped" v-loading="loading">
              <thead>
              <tr>
                <th>代码</th>
                <th>产品名</th>
                <th>商品编号</th>
                <!--<th>材料</th>-->
                <th>更新者</th>
                <th>更新时间</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-show="!hasData">
                <td colspan="8" style="text-align: center">没有搜索到相关信息！</td>
              </tr>
              <tr  v-for="(item, index) in currentData" :key="index">
                <!--<td>{{ index + 1 + number }}</td>-->
                <td>{{ item.goodcode }}</td>
                <td>{{ item.name && item.name.substring(0, 20) }}</td>
                <td>{{ item.goodno }}</td>
                <!--<td>{{ item.material }}</td>-->
                <td>{{ item.updateUser }}</td>
                <td>{{ item.updatetime }}</td>
                <td>
                  <span class="badge badge-success" @click="findMoreConsult(item.goodno, item.id)">详情</span>
                  <span class="badge badge-success" @click="updateConsult(item.goodno, item.id)">编辑</span>
                  <span class="badge badge-danger" variant="primary" @click="deleteConsult(item.id)">删除</span>
                </td>
              </tr>
              </tbody>
            </table>
          </div>

          <el-pagination
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :current-page="currentPage"
            :page-size="10"
            :total="totals">
          </el-pagination>

        </b-card>
      </div>
    </div>
  </div>
</template>

<script>
// import { formatDate } from '../../service/date'
import { mapState, mapActions, mapMutations } from 'vuex'
import {
  // getAllGoodsCount,
  deleteGoods
  // fetchGoodsList
} from '../../service/api'
export default {
  name: 'tables',
  data() {
    return {
      loading: false,
      updateName: '',
      searchType: 'name',
      searchName: ''
    }
  },
  computed: {
    hasData() {
      return !!this.currentData.length
    },
    ...mapState('pl', ['currentPage', 'totals', 'currentData'])
  },
  methods: {
    ...mapMutations('pl', [
      'resetFilter',
      'updatePage',
      'updateFilter',
      'updateTotals'
    ]),
    ...mapActions('pl', ['fetchGoodsList', 'fetchGoodsCount']),
    addProduct() {
      this.$router.push({
        path: '/product/p_add'
      })
    },
    updateConsult(index, id) {
      this.$router.push({
        path: '/product/p_d_edit?flag=2&goodno=' + index + '&id=' + id
      })
    },
    findMoreConsult(index, id) {
      this.$router.push({
        path: '/product/p_d_edit?flag=3&goodno=' + index + '&id=' + id
      })
    },
    deleteConsult(index) {
      this.$confirm('确认删除该条数据么', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.sureDeleteConsult(index)
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    async sureDeleteConsult(id) {
      const { err, data } = await deleteGoods({ id })
      if (err || data.code !== 200) {
        this.$message.error('删除失败')
        return false
      }
      this.updateTotals({})
      this.$message.success('删除成功')
      this.fetchDatas()
    },
    searchProduct() {
      const { searchType, searchName } = this.$store.state.pl
      if (searchType === this.searchType && searchName === this.searchName) {
        /* 没有变化 */
        return
      }
      /* 更新删选条件 */
      this.updateFilter({
        searchType: this.searchType,
        searchName: this.searchName
      })
      this.fetchDatas()
    },
    /* page变化 */
    async handleCurrentChange(page) {
      this.updatePage({ currentPage: page })
      if (this.loading) return false
      this.loading = true
      await this.fetchGoodsList()
      this.loading = false
    },
    /* 获取数据 */
    fetchDatas() {
      this.fetchGoodsList()
      this.fetchGoodsCount()
    },
    /* 重置查询条件 */
    reset() {
      this.searchName = ''
      const { searchName } = this.$store.state.pl
      if (!searchName) {
        /* 已经是重置后的状态 */
        return
      }
      this.resetFilter()
      this.fetchDatas()
    }
  },
  created() {
    this.updateName = localStorage.getItem('username')
    // fetch
    this.fetchDatas()
    /* 初始化searchType, searchName */
    const { searchType, searchName } = this.$store.state.pl
    this.searchType = searchType
    this.searchName = searchName
  }
}
</script>

<style type="text/scss" rel="stylesheet/scss" lang="scss" scoped>
@import '../../styles/common';
.form-control {
  display: inline-block;
  width: auto;
}
</style>
